<template>
    <!-- <div class="container">
        <div class="box">
            <h3>用户登录</h3>
            <hr>
            <div class="content">
                <div class="item">
                    <span>账户:</span>
                    <input type="text" v-model="user.username">
                </div>
                <div class="item">
                    <span>密码:</span>
                    <input type="password" v-model="user.password">
                </div>
                <div class="item">
                    <button class="loginBtn" @click="loginApi">登录</button>
                    <div>
                         <router-link to="/register">没有账户?去注册</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <div class="login_container">
        <div class="login_box">
            <div class="avatar_box">
                <img src="https://www.woniuxy.com/static/woniuopen/img/Frame%20265.png" alt="">
            </div>
            <el-form class="login_form">
                <el-form-item>
                    <el-input prefix-icon="el-icon-user" v-model="user.username"/>
                </el-form-item>
                 <el-form-item>
                    <el-input prefix-icon="el-icon-goods" show-password v-model="user.password"/>
                </el-form-item>
                <el-form-item>
                     <el-button type="primary" class="loginbtn" @click="loginApi">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            user:{
                username:'admin',
                password:'123'
            }
        }
    },
    methods:{
        async loginApi(){
            console.log(this);
            const {code,message,token}=await this.$api.users.login(this.user)
            if(code){
                this.$message({
                    message: '登录成功',
                    type: 'success'
                });
                //将token信息保存到本地存储中
                localStorage.setItem('token',token)
                //进行跳转到后台
                 this.$router.push({
                     path:'/home'
                 })
            }else{
                 this.$message.error('用户名或者密码错误');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    @import url('@/assets/css/reset.css');
    .login_container{
        background-color: #000;
        height: 100vh;
    }
    .login_box {
        width: 400px;
        height: 280px;
        background-color: #fff;
        position: absolute;
        border-radius: 10px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .avatar_box {
            width: 100px;
            height: 100px;
            border: 1px solid #999;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #999;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: orange;
            }
        }
        .login_form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
            .loginbtn{
                width: 100%;
            }
        }
    }

</style>